import React from 'react'
import { Form, Row, Col, Input, Button, Space } from 'antd'
import { DownOutlined, UpOutlined } from '@ant-design/icons'
import { inject, observer } from 'mobx-react'
import HomeStore from '../../stores/HomeStory'

export type CloumnType = {
  key: string
  name?: string
  type: string
  placeholder?: string
}

interface FormPlusProps {
  cloumns: Array<CloumnType>
  submitUrl?: string
  HomeStore?: HomeStore
}

const FormPlus: React.FC<FormPlusProps> = (props: FormPlusProps) => {
  const { cloumns, submitUrl, HomeStore } = props
  const [form] = Form.useForm()

  const getFields = () => {
    let children = []
    let count = 0
    children = cloumns.map((item) => {
      if (count > 2 && !HomeStore?.formPlusExpand) {
        return null
      }
      count++
      return (
        <Col span={8} key={item.key}>
          <Form.Item
            name={`field-${item.key}`}
            label={`Field ${
              HomeStore?.language === 'en_US' ? item.key : item.name ?? item.key
            }`}
            rules={[
              {
                required: true,
                message: 'Input something!',
              },
            ]}
          >
            <Input placeholder='placeholder' />
          </Form.Item>
        </Col>
      )
    })
    return children
  }

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values, submitUrl)
  }

  return (
    <Form
      form={form}
      name='advanced_search'
      className='ant-advanced-search-form'
      onFinish={onFinish}
      wrapperCol={{ span: 16 }}
      labelCol={{ span: 6 }}
    >
      <Row gutter={12}>{getFields()}</Row>
      <Row>
        <Col span={24} style={{ textAlign: 'right' }}>
          <Space size={2}>
            <Button type='primary' htmlType='submit'>
              {HomeStore?.language === 'en_US' ? 'Search' : '搜索'}
            </Button>
            <Button
              style={{ margin: '0 8px' }}
              onClick={() => {
                form.resetFields()
              }}
            >
              {HomeStore?.language === 'en_US' ? 'Clear' : '清空'}
            </Button>
            <div
              style={{ color: '#448af7', fontSize: 12 }}
              onClick={HomeStore?.changeFormPlusExpand}
            >
              {HomeStore?.formPlusExpand ? <UpOutlined /> : <DownOutlined />}{' '}
              Collapse
            </div>
          </Space>
        </Col>
      </Row>
    </Form>
  )
}

export default inject('HomeStore')(observer(FormPlus))
